<style lang='less' scoped>
#box {
  // 上半
  .top {
    background-color: #f5f6f7;
    background-image: linear-gradient(to bottom, #1d99ff, white, #f5f6f7);
    height: 750px;
    // 搜索
    .search {
      padding-top: 30px;
      padding-left: 20px;
      margin-bottom: 10px;
      input {
        width: 300px;
        height: 40px;
        border-radius: 50px;
        border: white 1px solid;
      }
      button {
        width: 70px;
        height: 30px;
        border-radius: 50px;
        background-color: #1d99ff;
        border: #1d99ff 1px solid;
        position: absolute;
        right: 80px;
        top: 64px;
        color: white;
      }
    }
    //
    .ability {
      img {
        width: 370px;
        margin-left: 10px;
      }
    }
    // 推荐
    .recommend {
      margin-left: 10px;
      background-color: white;
      width: 170px;
      height: 150px;
    }
    .discount {
      margin-left: 10px;
      background-color: white;
      width: 170px;
      height: 150px;
      margin-top: 30px;
    }
    // 推荐价格,优惠价格
    .price_ {
      width: 50px;
      height: 25px;
      border-radius: 20px;
      background-color: #ffeeee;
      color: red;
      font-size: 12px;
      text-align: center;
      line-height: 25px;
      margin-left: 15px;
    }
    .small_Win {
      display: inline-block;
    }
  }
  // 下半
  .bodyer {
    background-color: #f5f6f7;
    margin-bottom: 50px;
    ul {
      display: flex;
      li {
      }
    }
    div {
      width: 170px;
      display: inline-block;
      margin: 10px 12px;
      background-color: white;

      img {
        width: 170px;
        height: 200px;
      }
      span {
        color: red;
      }
      .add {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background-color: #1d99ff;
        float: right;
        border: #1d99ff 1px solid;
        margin-bottom: 5px;
        margin-right: 5px;
      }
    }
  }
  .car {
    height: 50px;
    position: fixed;
    width: 100%;
    bottom: 0px;
    z-index: 10px;
    background-color: aquamarine;
    .settlement {
      width: 150px;
      height: 30px;
      background-color: #1d99ff;
      border: #1d99ff 1px solid;
      border-radius: 30px;
      position: absolute;
      right: 30px;
      bottom: 10px;
    }
  }
  // 商品详情
  .goods_details {
    background-color: #f5f6f7;
    max-height: 600px;
    position: fixed;
    width: 100%;
    bottom: 0px;
    img {
      width: 100px;
      height: 100px;
      margin: 0 20px;
    }
    input {
      width: 25px;
    }
    li {
      display: flex;
      position: relative;
      border: 1px solid;
      line-height: 100px;
      margin-top: 10px;
      .details_price {
        color: red;
        position: absolute;
        bottom: -30px;
        left: 160px;
      }
      .details_box{
        position: absolute;
        bottom: -30px;
        right: 50px;
      }
      // 去结算
      .goods_settlement {
        width: 150px;
        height: 30px;
        background-color: #1d99ff;
        border: #1d99ff 1px solid;
        border-radius: 30px;
      }
      // 加减按钮
      .num_j{
        width: 30px;
      }
    }
  }
}
</style>
<template>
  <div id="box">
    <div class="top">
      <div class="search">
        <div
          class="el-icon-location-outline"
          style="margin-bottom: 10px; color: white"
        >
          老百姓自营商场>
        </div>
        <input type="text" />
        <button>搜索</button>
        <div class="el-icon-full-screen" style="color: white"></div>
      </div>
      <div class="ability">
        <img src="../assets/药房(1).png" alt="1" />
        <img src="../assets/药房2.png" alt="" />
      </div>
      <div class="recommend">
        <ul style="display: flex">
          <li>拼团钜惠></li>
        </ul>
        <div class="small_Win">
          <img src="#" alt="" style="width: 80px; height: 90px" />
          <div class="price_">$20.20</div>
        </div>
        <div class="small_Win">
          <img src="#" alt="" style="width: 80px; height: 90px" />
          <div class="price_">$20.20</div>
        </div>
      </div>
      <div class="discount">
        <ul style="display: flex">
          <li>新品推荐></li>
          <li>
            <span
              style="background-color: red; color: white; border-radius: 5px"
              >new</span
            >
          </li>
        </ul>
        <div class="small_Win">
          <img src="#" alt="" style="width: 80px; height: 90px" />
          <div class="price_">$20.20</div>
        </div>
        <div class="small_Win">
          <img src="#" alt="" style="width: 80px; height: 90px" />
          <div class="price_">$20.20</div>
        </div>
      </div>
    </div>
    <div class="bodyer">
      <ul>
        <li v-for="(item, index) in navDate" :key="index">{{ item }}</li>
      </ul>
      <div v-for="item in goodsDate" :key="item.goods_id">
        <img :src="item.goods_img" alt="1" />
        <p>{{ item.goods_name }}</p>
        <span>{{ item.goods_price | fn() }}</span>
        <button class="add" @click="add(item)">+</button>
      </div>
    </div>
    <div class="car" v-if="show_hide">
      <img
        src="../assets/购物车.png"
        alt=""
        @click="car()"
        style="width: 50px; height: 50px"
      />
      <span>{{ priceAll }}</span>
      <button class="settlement" @click="settlement()">去结算</button>
    </div>
    <!-- 详情 -->
    <ul class="goods_details" v-show="car_show">
      <!-- <button @click="car_show=false" style="float: right;">X</button> -->
      <li v-for="item in carDate" :key="item.id">
        <input
          type="checkbox"
          :checked="item.status"
          @click="item.status = !item.status"
        />
        <img :src="item.img" alt="" />
        <span class="details_price">{{ item.price }}</span>
        <p class="details_name">{{ item.name }}</p>
        <div class="details_box">
          <button class="num_j" @click="jian(item.num--)" ref="g_num" :disabled="item.num <= 1">-</button>
          <span style="margin: 0 10px;">{{ item.num }}</span>
          <button class="num_j" @click="item.num++">+</button>
        </div>
      </li>
      <li style="height: 50px; line-height: 50px">
        <label> <input type="checkbox" />{{ cekAll }} </label>

        <span style="margin: 0 20px; color: red">{{ priceAll }}</span>
        <button
          class="goods_settlement"
          @click="settlement()"
          style="margin: 10px 0 0 80px"
        >
          去结算
        </button>
      </li>
    </ul>
  </div>
</template>

<script>
import router from "@/router";

export default {
  components: {},
  data() {
    return {
      navDate: ["热门推荐", "新品推荐", "清凉一夏", "呵护肠胃"],
      goodsDate: [
        {
          goods_id: 0,
          goods_type: 0,
          goods_img:
            "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcbu01.alicdn.com%2Fimg%2Fibank%2FO1CN01aQCaGR2NQospuHkV9_%21%212215182279958-0-cib.jpg&refer=http%3A%2F%2Fcbu01.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1755431853&t=828247085f6e2d1da45cf5ddec3bb328",
          goods_name: "精度念慈菴",
          goods_price: 33,
        },
        {
          goods_id: 1,
          goods_type: 0,
          goods_img:
            "https://b0.bdstatic.com/3b84de1ba7c762b4c989a244d5c5ac04.jpg",
          goods_name: "999感冒灵",
          goods_price: 20,
        },
        {
          goods_id: 2,
          goods_type: 0,
          goods_img:
            "https://img14.360buyimg.com/pop/jfs/t1/182690/28/397/163764/60812786E3f4ff2ac/2288003ccf62386d.jpg",
          goods_name: "金嗓子",
          goods_price: 40,
        },
        {
          goods_id: 3,
          goods_type: 1,
          goods_img:
            "https://miaobi-lite.bj.bcebos.com/miaobi/5mao/b%275LiJ57K%2B54mM6JGh6JCE57OW6YW46ZSM5Y%2Bj5pyN5ray5ZKMb3Rj5ZOq5Liq5aW9XzE3MjkzMjc4NzIuNDU1NTcyOA%3D%3D%27/0.png",
          goods_name: "葡萄糖酸锌口服液",
          goods_price: 50,
        },
      ],
      carDate: [],
      show_hide: false,
      car_show: false,
    };
  },
  methods: {
    add(i) {
      if (this.carDate.find((item) => item.name == i.goods_name) == undefined) {
        this.carDate.push({
          id: this.carDate.length,
          name: i.goods_name,
          img: i.goods_img,
          price: i.goods_price,
          num: 1,
          status: true,
        });
        this.show_hide = true;
      } else {
        this.carDate.find((item) => item.name == i.goods_name).num++;
      }
    },
    // 结算
    settlement() {
      let arr = this.carDate.filter((item) => item.status == true);
      localStorage.setItem("medicine", JSON.stringify(arr));
      router.push({ name: "jieSuan" });
    },
    // 详情显示隐藏
    car() {
      this.car_show = !this.car_show;
    },
   
  },
  computed: {
    priceAll() {
      let number = 0;
      this.carDate.forEach((item) => {
        if (item.status) {
          number += item.price * item.num;
        }
      });
      return parseFloat(number);
    },
    cekAll() {
      let arr = this.carDate.filter((i) => i.status == true);
      if (arr.length == 0) {
        return "全选";
      } else {
        return "已选" + arr.length + "件";
      }
    },
  },
  filters: {
    fn(res) {
      return "￥" + res;
    },
  },
  mounted() {},
};
</script>